<template>
	<view class="gallery">
		<view class="wrapper" :style="{width: width, height: width}" v-for="idx in num" :key='idx' @tap="choose($event, idx)">
			<image v-if="imgs[idx]!=undefined" class="img" :src="imgs[idx] || back" :mode="mode" webp ></image>
			<view v-else class="desc" :class="descPos">{{descs[idx]}}</view>
			<view v-if="showDelete" class="del" @tap.stop="del($event, idx)">{{delIcon}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "hgUploadImgs",
		created() {
			this.imgs.length=this.num
		},
		props:{
			num: {
				type: Number, default: 3,	// 图片数量
			},
			descs: {
				type: Array, default: [],	// 每一个图片的描述信息
			},
			descPos:{
				type: String, default: 'center',	// 描述信息所在位置(center，bottom，top)
			},
			delPos:{
				type: String, default: 'topRight',	// 删除按钮位置（topRight，topLeft，bottomLeft，bottomRight，bottom，top）
			},
			delIcon:{
				type: String, default: '×',			// 删除按钮图标
			},
			cols:{
				type: Number, default: 3,			// 每一行显示的列数（1，2，3，4）
			},
			sourceType: {
				type: Array, default: ['album', 'camera'],	// 来源
			},
			size:{
				type: Array, default: ['original', 'compressed'],	// 大小尺寸
			},
			align:{
				type: String, default: 'center',						// 多行对齐方式
			},
			back:{
				type: String, default: '',								// 默认背景图片
			},
			mode: {
				type: String, default: 'aspectFill',					// 图片伸缩模式,
			},
			showDelete:{
				type: Boolean, default: true,							// 是否显示删除按钮
			},
			preview:{
				type: Boolean, default: true,							// 是否可以进行大图预览
			},
		},
		components:{
			
		},
		data() {
			return {
				descClass: 'center',
				imgs:[
					
				]
			};
		},
		computed:{
			width(){
				return Math.round((750.0/this.cols)) - 20 + 'rpx'
			}
		},
		methods:{
			del(evt, idx){
				this.imgs.splice(idx, 1, undefined)
				this.num=this.num
			},
			choose(evt, idx, img){
				uni.chooseImage({
					sizeType: this.size,
					sourceType:this.sourceType,
					count: 1,
					success: (res) => {
						const img = res.tempFilePaths[0]
						this.imgs.splice(idx, 1, img)
						this.num=this.num
					}
				})
			},
			getImages(){
				return this.imgs
			}
		},
	}
</script>

<style scoped>
	.gallery{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		justify-items: flex-start;
	}
	
	.center{
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	.desc{
		text-align: center;
		
	}
	
	.del{
		position: absolute;
		width: 32rpx;
		height: 32rpx;
		display: inline-block;
		top: 0;
		right: 0;
		padding: 10rpx;
		color: white;
		text-align: center;
		line-height: 32rpx;
		vertical-align: middle;
		background-color: #ff0000ff;
	}
	
	.wrapper{
		flex-grow: 0;
		flex-shrink: 1;
		position: relative;
		border: solid 1px black;
		background-color: white;
		margin-top: 20rpx;
	}
	
	.img{
		overflow: hidden;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		border: none;
	}
</style>
